<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--BootStrap设计的页面支持响应式的 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入主题  -->

    <link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />

    <!-- 引入bootstrap的css -->

    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!-- 引入jquery的js  因为bootstrap使用到jquery的js -->

    <script src="js/jquery-3.3.1.min.js"></script>

    <!-- 引入bootsrap的js -->

    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <title>商品评价页</title>

    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.raty", "jquery.raty"], function() {
                $("#starts").raty({
                    number: 5, //星星个数
                    path: 'http://repo.bfw.wiki/bfwrepo/image/', //图片路径
                    starOn: 'star-on.png', //黄色星星图片（可自定义）
                    starOff: 'star-off.png', //灰色星星图片（可自定义）
                    target: '#title', //显示标题
                    hints: ['很差', '一般', '不错', '很好', '满意'], //自定义标题
                    click: function(score, evt) {
                        $("#grade").val(score); //将分数保存到<input>中
                    }
                });
            });
        });
    </script>
    <p></p>
    <style>
        .evaluate {
            width: 100%;
        }
        #starts {
            width: 150px;
            float: left;
        }
        #title {
            width: 200px;
            float: left;
        }
    </style>
    <style>
        .xiaotaoobject {
            height: 140px;
            width: 140px;
            object-fit: contain;
        }
        .samesize{
            height: 320px ;
            width: 100%;
            object-fit: cover;
            text-align: center;
        }
        .samesizesmall{
            height: 250px;
            max-width: 100% ;
            object-fit: cover;
            text-align: center;
        }
        body{
            background-image: url("images/背景.jpg");
        }
    </style>
</head>
<body >
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <img alt="小淘图标" class="xiaotaoobject"  src="images/order_a.jpg" />
                </div>
                <div class="col-md-6 column">
                    <div class="page-header">
                        <h1>
                            小淘商城<p><small>2020最新潮流</small></p>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6 column">
            <ul class="breadcrumb">
                <li>
                    <a href="#">首页</a>
                </li>
                <li class="active">
                    商品评价
                </li>
            </ul>
            <blockquote>
                <p >
                    <span class="glyphicon glyphicon-bell">
                    每一个意见都很重要！
                    </span>
                </p> <small> <cite>小淘寄语</cite></small>
            </blockquote>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-2 column">
            <img alt="140x140"class="xiaotaoobject" src="images/1.jpg" />
        </div>
        <div class="col-md-6 column">
            <div class="page-header">
                <h4>
                    <small><a href="#">商品详情页链接</a></small>
                </h4>
            </div>
        </div>
    </div>
    <div class="row clearfix">
<!--        打星星-->
        <div class="col-md-4 column">
            <div class="evaluate">
                <div id="starts"></div>
                <div id="title"></div>
            </div>
<!--            <br>-->
<!--            <input type="text" id="grade" />-->
        </div>
<!--        后面要加上文字评价信息写在这里-->
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
            <button type="button" class="btn btn-primary">提交</button>
        </div>
    </div>
</div>
</body>
</html>